<template>
  <SearchList :columns="columns" :pagination="pagination" ref="refList"
              :load-data="loadData" :title="'登录日志'" :search-form="searchItems" />
</template>

<script setup lang="ts" name="loginLog">

import {ref} from "vue";
import {loadLoginLogPage} from "@/apis/sop";
import SearchList from "@/views/sop/list/SearchList.vue";
import {useStore} from "@/stores";
import {userDataWatch} from "@/utils/sop/UseDataWatch";

const store = useStore();

const loadData = async (params: any) => {
  const plat: any = store.getCurrentPlatform();
  const result = await loadLoginLogPage({
    platformId: plat.id,
    ...params
  });

  return result;
}

const {refList} = userDataWatch(false);

const pagination = ref<Pagination>({
  current: 1,
  pageSize: 20,
  total: 0,
});

const searchItems = ref([
  {
    type: 'input',
    name: 'userName',
    label: '用户名称',
    size: 'default',
    placeholder: '请输入用户名称',
    clearable: true,
    defValue: '',
  },
  {
    type: 'input',
    name: 'clientId',
    label: '客户标识',
    size: 'default',
    placeholder: '请输入客户标识',
    clearable: true,
    defValue: '',
  },
]);

const tableAction = []

const columns = ref([
  {
    id: 'id',
    name: '标识',
    hideCol: true,
    show: false,
  },
  {
    id: 'terminalId',
    name: '登录终端',
    sort: 'custom',
    show: true,
  },
  {
    id: 'clientId',
    name: '客户端',
    show: true,
  },
  {
    id: 'userAccount',
    name: '用户账号',
    show: true,
  },
  {
    id: 'userName',
    name: '用户名称',
    show: true,
  },
  {
    id: 'userRole',
    name: '用户角色',
    show: true,
  },
  {
    id: 'peerIp',
    name: '登录IP',
    show: true,
  },
  {
    id: 'loginTime',
    name: '登录时间',
    show: true,
  },
  {
    id: 'userAgent',
    name: '浏览器',
    show: true,
  },
]);

const config = ref<SearchConfig>({
  hasSelect: false,
  showSearch: true,
  search: searchItems,
  tableAction: tableAction,
  title: '登录日志',
  setting: {
    showMoreSearch: false,
    showMoreButton: false,
    disableMoreButton: true,
    searchBackground: '#fff',
    extraSearchBackground: '#F7FBFE',
    rootBackground: '#f0f2f5',
    tableToolBackground: '#fff',
    tableToolRound: '2px',
    tableMargin: '16px 32px 16px',
    pageMargin: '',
  },
  layout: {
    buttonSize: 'default',
    actionButtonSize: 'default',
    inputSize: 'default',
  },
});

</script>

<style scoped>
.el-form-item-class .el-form-item__label {
  font-size: 12px;
}

</style>
